<template>
  <div class="main">
    <!-- 登录 -->
    <div class="imgbox">
      <img class="topImg" src="../../assets/login.png" alt="">
      <h2 class="Htext">医路前行</h2>
    </div>
    <div v-if="!isRegister" class="login_box">
      <van-field v-model="username" placeholder="用户名" />
      <van-field v-model="password" type="password" placeholder="密码" />
      <div style="margin: 16px">
        <van-button round block class="info" native-type="submit" @click="loginbtn">登录</van-button>
      </div>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit" @click="isRegister = true">注册</van-button>
      </div>
      <div class="sides"><span></span>第三方登录<span></span></div>
      <div class="icons">
        <img src="../../assets/qq2.png" alt="">
        <img src="../../assets/wx2.png" alt="">
        <img src="../../assets/wb.png" alt="">
      </div>
    </div>

    <!-- 注册 -->
    <div v-if="isRegister" class="imgbox">
      <img class="topImg" src="../../assets/register.png">
      <h2 class="Htext">医路前行</h2>
    </div>
    <div v-if="isRegister" class="register_box">
      <van-field v-model="reguser" placeholder="用户名" />
      <van-field v-model="regpwd" type="password" placeholder="密码" />
      <van-field v-model="regrealName" placeholder="真实姓名" />
      <van-field v-model="phone" placeholder="电话号码" />
      <p @click="isRegister = false">返回登录</p>

      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit" class="regBtn" @click="regbtn">注册</van-button>
      </div>
    </div>
  </div>
</template>
  
<script lang="ts" setup>
import { ref } from 'vue'
import { login, register } from '../../api/login'

import { useRouter } from 'vue-router'

let username = ref<string>('')
let password = ref('')

let reguser = ref('')
let regpwd = ref('')
let regrealName = ref('')
let phone = ref('')
let isRegister = ref(false)

const router = useRouter()

// 登录
let loginbtn = async () => {
  try {
    const response = await login({ username: username.value, password: password.value, })
    // 处理登录成功的情况
    if (response.token) {
      sessionStorage.setItem('token',response.token)
      router.push('/')
    }
  } catch (error) {
    // 处理登录失败的情况
    console.log(error)
  }
}

// 注册
let regbtn = async () => {
  try {
    if (reguser.value.length < 5 || regpwd.value.length < 5 || phone.value.length < 7 || !regrealName) {
      reguser.value = ''
      regpwd.value = ''
      phone.value = ''
      return alert('用户名和密码不能小于5个字符，电话不能少于7个字符,真实姓名不能为空')
      
    } else {
      const result = await register({ username: reguser.value, password: regpwd.value, phone: phone.value, realName: regrealName.value })
      console.log(result)
      if(result.code == 200) {
        return alert('恭喜您，注册成功')
      }
    }
  } catch (error) {
    console.log(error)
  }
}

</script>
  
<style lang="less" scoped>
.main {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #31A6F5;

  .topImg {
    width: 80%;
    height: 80%;
    position: absolute;
    top: 40px;
    left: 30px
  }

  ;

  .imgbox {
    width: 100%;
    height: 150px;
    position: absolute;
    top: 20px;
    z-index: 99;

    .Htext {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: 5px;
      margin-left: -50px;
      color: #fff;
    }
  }

  .van-field {
    width: 90%;
    margin-top: 15px;
    margin-left: 17px;
  }
}
.info {
  background: rgb(211, 210, 210);
}

.login_box,
.register_box {
  width: 100%;
  height: 450px;
  position: absolute;
  bottom: 0px;
  box-sizing: border-box;
  background-color: #fff;
  border-top-right-radius: 30px;
  border-top-left-radius: 30px;

  .regBtn {
    margin-top: 20px;
  }

  ;

  p {
    float: right;
    margin-right: 20px;
    color: #666565f0;
  }

  ;

  .sides {
    width: 340px;
    height: 0px;
    margin: 50px auto;
    line-height: 30px;
    text-align: center;
    font-size: 12px;
    color: #939191;
    position: relative;

    span {
      display: inline-block;
      width: 130px;
      height: 1px;
      background: rgb(128, 127, 127);
    }

    ;

    span:nth-child(1) {
      position: absolute;
      left: 0;
      top: 15px;
    }

    ;

    span:nth-child(2) {
      position: absolute;
      right: 0;
      top: 15px;
    }
  }

  ;

  .icons {
    width: 200px;
    height: 50px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;

    img {
      width: 40px;
      height: 40px;
    }
  }
}

.van-button {
  border: 1px solid #fff;
}
</style>
  